<template>
<!-- pages/collect/collect.wxml -->
<Tabs :tabs="tabs" @tabsItemChange="handleTabsItemChange">
    <view class="collect_main">
        <view class="collect_title">
            <text class="collect_tips active">全部</text>
            <text class="collect_tips">正在热卖</text>
            <text class="collect_tips">即将上线</text>
        </view>
        <view class="collect_content">
            <navigator v-for="(item, index) in collect" :key="index" class="goods_item" :url="'/pages/goods_detail/goods_detail?goods_id=' + item.goods_id">
                <!-- 左侧 图片容器 -->
                <view class="goods_img_wrap">
                    <image mode="widthFix" :src="item.goods_small_logo?item.goods_small_logo:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'"></image>
                </view>
                <!-- 右侧 商品容器 -->
                <view class="goods_info_wrap">
                    <view class="goods_name">{{item.goods_name}}</view>
                    <view class="goods_price">￥{{item.goods_price}}</view>
                </view>
            </navigator>
        </view>
    </view>
</Tabs>
</template>

<script>
import Tabs from "../../components/Tabs/Tabs";

export default {
  data() {
    return {
      collect: [],
      tabs: [{
        id: 0,
        value: "商品收藏",
        isActive: true
      }, {
        id: 1,
        value: "品牌收藏",
        isActive: false
      }, {
        id: 2,
        value: "店铺收藏",
        isActive: false
      }, {
        id: 3,
        value: "浏览足迹",
        isActive: false
      }]
    };
  },

  components: {
    Tabs
  },
  props: {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    const collect = wx.getStorageSync("collect") || [];
    this.setData({
      collect
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},
  methods: {
    // 标题点击事件 从子组件传递过来
    handleTabsItemChange(e) {
      // console.log(e);
      // 1. 获取被点击的标题索引
      const {
        index
      } = e.detail; // 2. 修改原数组

      let {
        tabs
      } = this;
      tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false); // 3. 赋值到data中

      this.setData({
        tabs
      });
    }

  }
};
</script>
<style>
@import "./collect.css";
</style>